<template>
	<div class="exercises-result" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<div class="preview-head">
			<!-- <router-link to="/exercises/task"><i class="el-icon-arrow-left"></i>返回</router-link> -->
			<a @click="goBack()"><i class="el-icon-arrow-left"></i>返回</a>
		</div>
		<div class="preview-conten maxW">
			<div class="preview-conten-l">
				<div class="preview-conten-l-h">
					<h3>{{testObj.name}}</h3>
					<p>考试时间：{{totalTimer ? totalTimer : '--' }} 分钟，满分 {{testObj.score}} 分</p>
				</div>
				<div class="exercises-test-type" v-if="0">
					<el-radio-group v-model="type">
						<template v-for="item of questionList">
							<el-radio :label="item.id">{{item.name}}</el-radio>
						</template>
					</el-radio-group>
				</div>
				<ul>
					<template v-for="(type, list) of testList.question_type">
						<li class="preview-conten-list" :key="list">
							<div class="preview-conten-title" v-if="type.id == 1">
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，每小题备选答案中，只有一个符合题意的正确答案。错选，不选均不得分。)
							</div>
							<div class="preview-conten-title" v-else-if="type.id == 2">
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，每小题备选答案中，有两个或两个以上符合题意的正确答案。多选、少选、错选、不选均不得分。)
							</div>
							<div class="preview-conten-title" v-else-if="type.id == 9">
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，每小题备选答案中，两个答案中只有一个符合题意的正确答案。)
							</div>
							<div class="preview-conten-title" v-else>
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，点击文本框，直接在文本框内作答即可。)
							</div>
							<ul class="preview-conten-subject">
								<template v-for="(item, index) of testList.question_list"  v-if="parseInt(item.qt_id) == parseInt(type.id)">

									<li class="preview-conten-subject-c " v-if="parseInt(item.type_base_id) === 1 || parseInt(item.type_base_id) === 4" :key="item.id">
										<template>
											<div class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
										</template>
										<el-radio-group v-model="item.answer">
											<ul class="preview-topic">
												<template v-for="(option,key) in item.option">
													<li class="preview-subject-title" v-if="item.pattern === 1">
														<el-radio :label="option.name"></el-radio>
														<div v-if=" parseInt(item.type_base_id) !== 4" v-html="option.value"></div>
													</li>
													<li class="preview-subject-title option-pattern" v-if="item.pattern === 2">
														<el-radio :label="option.name"></el-radio>
														<!-- <div class="" v-html="option.value"></div> -->
													</li>
												</template>
											</ul>
										</el-radio-group>
									</li>
									<li class="preview-conten-subject-c" v-else-if=" parseInt(item.type_base_id) === 2" :key="item.id">
										<template>
											<div class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
										</template>
										<ul class="preview-topic">
											<template v-for="(option,key) in item.option">
												<li class="preview-subject-title" v-if="item.pattern === 1">
													<el-checkbox :label="option.name"></el-checkbox>
													<div class="" v-html="option.value"></div>
												</li>
												<li class="preview-subject-title option-pattern" v-if="item.pattern === 2">
													<el-checkbox :label="option.name"></el-checkbox>
													<!-- <div class="" v-html="option.value"></div> -->
												</li>
											</template>
										</ul>
									</li>
									<li :id="'test'+item.id" class="preview-conten-subject-c" v-else-if="parseInt(item.type_base_id) === 4" :key="item.id">
										<template>
											<div  class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
										</template>
										<el-radio-group v-model="item.answer">
											<ul class="preview-topic">
												<template v-for="(option,key) in item.option">
													<li class="preview-subject-title" v-if="item.pattern === 1">
														<el-radio :label="option.name"></el-radio>
														<!-- <div class="" v-html="option.value"></div> -->
													</li>
													<li class="preview-subject-title option-pattern" v-if="item.pattern === 2">
														<el-radio :label="option.name"></el-radio>
														<!-- <div class="" v-html="option.value"></div> -->
													</li>
												</template>
											</ul>
										</el-radio-group>
									</li>
									<li class="preview-conten-subject-c" v-else :key="item.id">
										<template>
											<div class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong v-if="item.score">({{item.score}}分)</strong>
											</div>
										</template>
									</li>
								</template>
							</ul>
						</li>
					</template>
				</ul>
			</div>
			<div class="exercises-conten-r">
				<ul class="exercises-conten-r-type">
					<template v-for="(type, list) of questionList">
						<li class="exercises-conten-r-type-state exercises-result-state">
							<div>{{type.name}}<i>（共{{type.score}}分）</i></div>
							<ul>
								<template v-for="(item, index) of type.children">
									<li v-if="parseInt(item.qt_id) == parseInt(type.id)" :key="index">
										<span class="exercises-unanswered">{{++index}}</span>
									</li>
								</template>
							</ul>
						</li>
					</template>
				</ul>
				<div class="exercises-answer-state">
					<span>正确<i></i></span>
					<span>未答<i></i></span>
					<span>错误<i></i></span>
				</div>
			</div>
		</div>
		<!-- 预览图片 -->
		<image-viewer v-if="imagePreview.showViewer" :initial-index="imageIndex" :on-close="closeViewer" :url-list="imagePreview.previewSrcList">
		</image-viewer>
	</div>
</template>
<script>
export default {

	data() {
		return {
			imagePreview: { /*图片预览*/
				showViewer: false,
				previewSrcList: []
			},
			tasksVisible: false,
			headClassList: null,
			type: 1,

			testList: [],
			/* 试卷列表 */
			answerList: [],
			/* 试卷答案 */
			questionList: [],
			/*试卷列表*/
			scoreList: [],
			/*评分*/
			commentList: [],
			/*评语*/
			testObj: {
				name: '',
				time: '',
				time2: '',
				score: 0,
				type: 1,
			},
			recordId: '',
			/*试卷id*/

			loading: true,
			imgVisible: false,
			imgArray: [],
			imgIndex: 0,
			totalTimer: '--'


		}
	},
	mounted() {
		this.headClassList = document.querySelector('#reception').classList;
		this.headClassList.add('hidden-header')


		document.addEventListener('click', (e) => {

			let [targetSrc, imgs, srcArr, currentIdx] = ['', '', '', '']
			if (e.target.nodeName === 'IMG') {

				this.imagePreview.showViewer = true
				targetSrc = e.target.src;
				imgs = [...e.target.parentNode.children];
				srcArr = imgs.map(item => item.currentSrc);
				currentIdx = srcArr.indexOf(targetSrc);

				this.imagePreview.previewSrcList = srcArr
				this.imgIndex = targetSrc

			}

		}, false)
	},
	destroyed() {
		this.headClassList.remove('hidden-header')
	},
	created() {
		this.getTestList()
	},
	computed: {
		imageIndex() {
			return this.imagePreview.previewSrcList.indexOf(this.imgIndex);
		}

	},
	methods: {
		/**
		 * 关闭图片
		 * @DateTime 2020-04-16T17:40:41+0800
		 * @qiu_m
		 * @return   {[type]}                 [description]
		 */
		closeViewer() {
			this.imagePreview.showViewer = false;
			this.imagePreview.previewSrcList = []
		},

		/**
		 * 重新排序试卷
		 * @DateTime 2019-08-12T09:38:37+0800
		 * @param    {[type]}                 arr   [description]
		 * @return   {[type]}                       [description]
		 */
		reSort(arr) {

			return function(a, b) {
				var value1 = a[arr];
				var value2 = b[arr];
				return value1 - value2;
			}
		},
		/**
		 * 根据参数请求试卷详情
		 * @DateTime 2019-07-22T17:37:30+0800
		 * @return   {[type]}                 [description]
		 */
		getTestList() {
			let success = (res => {
				this.testList = res.data.test_detail;
				let data = res.data.test_detail;
				this.testObj.score = 0
				// 计算试卷的总分数
				for (let s = 0; s < this.testList.question_type.length; s++) {
					this.testObj.score += parseInt(this.testList.question_type[s].score)
				};

				/*根据 id 升序排序试卷*/
				this.testList.question_list = this.testList.question_list.sort(this.reSort('qt_id'));

				this.recordId = res.data.task_record.id
				this.testObj.time = res.data.use_time
				// this.renderTimeuse(this.testObj.time)
				this.testObj.name = res.data.task_name;
				this.totalTimer = res.data.length;


				/*	this.$nextTick(()=>{
						//改变试题 img 的 url
						let imgArr = document.querySelectorAll('.preview-conten-subject-c img')
						let baseUrl = sessionStorage.getItem('host_addr');
						for (var i = 0; i < imgArr.length; i++) {
							let _temp = imgArr[i].src
							imgArr[i].src = _temp.replace(location.protocol+'//'+location.host, baseUrl);
						}
					})*/


				/*组装一个新的试卷数据*/
				this.questionList = [];
				data.question_type.forEach((item) => {
					this.questionList.push({
						id: item.id,
						count: item.count,
						name: item.question_type,
						score: item.score,
						type: item.cn_num,
						children: []
					});
				})

				data.question_list.forEach((list, key) => {
					this.$set(list, 'i', key)
					/*遍历试题*/
					this.questionList.forEach((item, index) => {
						if (list.qt_id == item.id) {
							item.children.push(list)

						}
					});
				});



				this.loading = false
			});

			let params = {
				userid: this.$route.query.uid,
				task_id: this.$route.query.tid,
				classid: this.$route.query.id
			};

			let fail = (res => {
				this.$message.error({
					duration: 8000,
					message: res.msg
				})
				this.loading = false
			})

			this.$ajax({
				url: 'api/task/resource_by_taskid',
				method: 'get',
				params: params,
				func: { success: success, fail: fail }
			})
		},
		/**
		 * 返回上一页
		 * @return {[type]} [description]
		 */
		goBack() {

			this.$router.push({ path: '/class/homework/index', query: { id: this.$route.query.id } })
		},
	}
}
</script>